<template>
  <div>
    <h2>商品列表</h2>
    <GoodsList 
      v-for="item in list" 
      :key="item.id"
      :id="item.id"
      :pname="item.pname"
      :price="item.price"
      :info="item.info"

      @kanyidao="changePrice"
    ></GoodsList>
  </div>
</template>

<script>
import GoodsList from '@/components/GoodsList.vue'

export default {
  data () {
    return {
      list: [
          { id: 101, pname: '超级无敌棒棒糖', price: 15, info: '好吃，再来一根' },
          { id: 171, pname: '超级解渴水果茶', price: 80, info: '好甜，真好喝' },
          { id: 191, pname: '超级好吃大鸡腿', price: 60, info: '可口，下饭~' }
        ]
    }
  },
  methods: {
    changePrice (val, id) {
      // console.log(val, id)
      // 先根据id 查找元素
      let res = this.list.find(item => item.id == id)
      // 修改商品的价格
      res.price = res.price - val
    }
  },
  components: {
    GoodsList
  }
}
</script>

<style>

</style>